import React, {useRef, useState} from 'react';
import {PageContainer} from "@ant-design/pro-layout"
import {Button, Image, message, Popconfirm, Switch} from "antd";
import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
import ProTable  from '@ant-design/pro-table';
import CreateOrEdit from "@/pages/Slides/components/CreateOrEdit";
import {getSlideData,delSlide,editSlideStatus} from "@/services/Slides";
const Index = () => {
  const [isModalVisible,setIsModalVisible] = useState(false)

  const [editId,setEditId] = useState(undefined)

  //表格自动刷新
  const refs=useRef();
  //表格字段
  const columns=[
    {
      title:'ID',
      dataIndex:'id',
      hideInSearch: 'false',
    },
    {
      title:'名称',
      dataIndex:'title',
    },
    {
      title:'地址',
      dataIndex:'url',
    },
    {
      title:'图片',
      dataIndex:'img_url',
      render:(_,record) =>  (
        <Image
          width={60}
          src={record.img_url}
        />
      )
    },
    {
      title:'状态',
      dataIndex:'status',
      hideInSearch: true,
      render: (_, record) => {
        return <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"

          onChange={() => {
            switchSlide(record.id)
          }}
          defaultChecked={record.status == 0 ? false : true}/>
      }
    },
    {
      title:'操作',
      render: (_,record) => {
        return <div>
          <Popconfirm title="你确定要删除吗？" onConfirm={()=>{ return delSlideList(record.id)}} okText='确认'>
            <Button type="danger" shape="circle"  icon={<DeleteOutlined />} />
          </Popconfirm>&nbsp;&nbsp;
          <Button type="primary" shape="circle" onClick={ async ()=>showModal(true,record.id) }
                  icon={<EditOutlined />} />&nbsp;&nbsp;
        </div>
      }
    },
  ]
  //模态框
  const showModal = (show,editId = undefined) => {
    setIsModalVisible(show)
    setEditId(editId)
  }
  //获取轮播
  const getSlide = async (params)=>{
    const getSlideList = await getSlideData(params)
    console.log(getSlideList)
    return{
      data:getSlideList.data,
      success:true,
    }
  }

  //删除轮播
  const delSlideList = async (id) =>{
    const res = await delSlide(id)
    console.log(res);
    if (res.status == null){
      message.success("删除成功")
      setIsModalVisible(false)
      refs.current.reload();
    }else{
      message.error('删除失败')

    }
  }
  //改变轮播图状态
  const switchSlide  = async (id) => {
    const changeSwitch = await editSlideStatus(id);
    if (changeSwitch.status === undefined) {
      message.success('改变状态成功')
    }
  }
  return (
    <PageContainer>
      <ProTable
        actionRef={refs}
        columns={columns}
        rowKey="id"
        request={async (params= {}) => getSlide(params) }
        search={{
          labelWidth: 'auto',
          collapseRender:false,
        }}
        dateFormatter="string"
        headerTitle="轮播管理"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} onClick={()=> showModal(true)}  type="primary">
            新建
          </Button>,

        ]}
      />
      {
        isModalVisible ? <CreateOrEdit
          showModal={showModal}
          visible={isModalVisible}
          editId={editId}
          refs={refs}
        />
        :''
      }

    </PageContainer>
  );
}


export default Index;
